<template>
    <div class="buddhism_music">
        <div class="home-header">
            <div class="home-index-search" @click="router('/buddhism_music_search')">
                <i class="iconfont icon-sousuo"></i>
                <input type="text" placeholder="搜索">
            </div>
        </div>

        <div class="buddhism_list">
            <h2 class="buddhism_title" @click="router('/song_list?type=music')">佛学歌曲 <span>全部 {{musicTotal}}<i class="van-icon van-icon-arrow van-cell__right-icon font-right"></i></span></h2>

            <div class="buddhism_list_scroll">
                <div class="buddhism_list_cart" :style="{width:2.12 * musicList.length +'rem', display:'flex'}">
                    <div class="buddhism_list_item" v-for="(item, index) of musicList" :key="index" @click="router(`/music_pay?id=${item.musicid}&type=music`)">
                        <div class="item_music_img">
                            <span class="span_music"><i class="iconfont  icon-bofangliang"></i>{{ item.visitnum }}</span>
                            <img :src="item.showpicture" v-if="item.showpicture">
                            <img src="http://tmpfile.nbyh.mejimeji.net/music_icon_02.png" style="width: 60%; height: auto; opacity: 0.5;" v-else>
                        </div>
                        
                        <p>{{item.musicname}} [{{item.author}}]</p>
                        <!-- ({{item.musicfrom}}) -->
                    </div>
                </div>
            </div>
        </div>

        <!-- 分割线 -->

        <div class="buddhism_list">
            <h2 class="buddhism_title" @click="router('/song_list?type=dhikr')">佛经念诵 <span>全部 {{dhikrTotal}}<i class="van-icon van-icon-arrow van-cell__right-icon font-right"></i></span></h2>

            <div class="buddhism_list_scroll">
                <div class="buddhism_list_cart" :style="{width:2.12 * dhikrList.length +'rem', display:'flex'}">
                    <div class="buddhism_list_item" v-for="(item, index) of dhikrList" :key="index"  @click="router(`/music_pay?id=${item.musicid}&type=dhikr`)">
                        <div class="item_sutras_img">
                            <span class="span_music"><i class="iconfont  icon-bofangliang"></i>{{ item.visitnum }}</span>
                            <img :src="item.showpicture" v-if="item.showpicture">
                            <img src="http://tmpfile.nbyh.mejimeji.net/nav_01.png" style="width: 60%; height: auto; opacity: 0.5;" v-else>
                        </div>
                        
                        <p>{{item.musicname}}  </p>
                        <!-- ({{item.musicfrom}}) [{{item.author}}] -->
                    </div>
                    
                </div>
            </div>
        </div>
        

        <div class="buddhism_cont_list">
            <h2 class="buddhism_title" @click="router('/seek_master_list')">寻师问法 <span>全部 {{ total }}<i class="van-icon van-icon-arrow van-cell__right-icon font-right"></i></span></h2>
            <van-cell class="buddhism-title" :title="item.title" is-link v-for="(item, index) of articleList" :key="index" :to="`/seek_master_details?id=${item.articleid}`" v-if="index < 20"></van-cell>
            <!-- <van-cell title="缘起咒(丹真绒布仁波切)" is-link></van-cell> -->
        </div>
    </div>
</template>
<script scoped>
import {getResponse, getResponses} from "../api"
export default {
    data(){
        return {
            musicList:[],
            dhikrList:[],
            articleList:[],
            pagenum:1,
            pagesize:50,
            musicTotal:0,
            dhikrTotal:0,
            articleTotal:0,
            total:''
        }
    },
    
    methods:{
        onClickLeft() {
            this.$router.go(-1)
        },

        router(url) {
            this.$router.push(url)
        },

        //寺庙列表
        async articleDetails(type) {	
            let arr = ['music', 'dhikr']
            const data = await getResponses(`/fochina/query/musiclist/json`,{'musictype':type,'pagenum': this.pagenum, 'pagesize':this.pagesize})
            
            
            if(data.code === '0000') {
               this[arr[type-1]+'List'] = data.data
               this[arr[type-1]+'Total'] = data.total
                
            } else {
                console.log(data.error)
            }
        },

        async getArticlelist() {	
            const data = await getResponses(`/fochina/query/articlelist/json`,{'querytype':0,'articletype':5, 'pagenum': this.pagenum, 'pagesize':this.pagesize})
            
            if(data.code === '0000') {
                this.articleList = data.data
                this.total = data.total
            } else {
                console.log(data.error)
            }
        }
    },
    created(){
        this.articleDetails(1)
        this.articleDetails(2)
        this.getArticlelist()
    },

    mounted(){
        // this.articleDetails(1)
        // this.articleDetails(2)
        // this.getArticlelist()
    }
}
</script>

<style>

.buddhism-title .van-cell__title {
    text-align: left;
    -webkit-line-clamp:1;
	text-overflow:ellipsis;
	overflow:hidden;
	white-space:nowrap;
	display: block !important;
}

.buddhism_music {
    min-height: 100vh;
    padding-bottom: 1rem;
    width:7.5rem;
    overflow-x: hidden;
}

.buddhism_cont_list {
    width:100%;
    background-color: #fff;
    border-top:1px solid  #E3E3E3;
    border-bottom: 1px solid  #E3E3E3;
}

.buddhism_cont_list h2 {
    padding:0 15px;
}

.buddhism_list_item {
    width:2rem;
    margin-right:0.12rem;
    
}


.buddhism_list_scroll {
    width:100%;
    overflow-x: auto;

}

.buddhism_list_scroll::-webkit-scrollbar { width: 0 !important; display: none }
*::-webkit-scrollbar { width: 0 !important; display: none }

.buddhism_list_item p {
    padding-top:0.14rem;
    line-height: 0.32rem;
    font-size:0.24rem;
}


.buddhism_list_item  .item_music_img {
    width:100%;
    height: 2rem;
    background-color:#eae8e3;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}



.buddhism_list_item .span_music {
    color:#fff;
    position: absolute;
    top:0.1rem;
    right: 0.1rem;
    font-size:0.22rem
}

.buddhism_list_item  .span_music i {
    font-size:0.16rem;
    margin-right:0.1rem;
}


.buddhism_list_item  img {
    width: 100%;
    height: auto;
}

.buddhism_list_item  .item_sutras_img {
    width:100%;
    height: 2.6rem;
    background-color:#eae8e3;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.buddhism_list_item  .item_sutras_img img{
    width:100%;
    height: 2.6rem;

}


.buddhism_list {
    width:100%;
    background-color: #fff;
    padding:0 0.2rem 0.32rem;
    box-sizing: border-box;
    border-top:1px solid  #E3E3E3;
    border-bottom: 1px solid  #E3E3E3;
    margin-bottom:0.2rem;
}

.buddhism_title {
    font-family: PingFangSC-Medium;
    font-size: 0.32rem;
    color: #333;
    display: flex;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 0.8rem;
    margin-top:0.06rem;
}

.buddhism_title span {
    font-family: PingFangSC-Regular;
    font-size: 0.24rem;
    color: #999;
    display: flex;
    align-items: center;
}



.home-header {
    height: 1rem;
    width:100%;
    background-image: linear-gradient(-90deg, #B3A277 0%, #AB946C 100%);
    display: flex;
    justify-content: center;
    align-items: center
}

.home-index-search {
    width:7rem;
    height: 0.6rem;
    background-color:#fff;
    position: relative;
    box-sizing: border-box;
}

.home-index-search i.icon-sousuo{
    position: absolute;
    left:0.28rem;
    top:50%;
    transform: translateY(-50%);
    color:#B2B2B2;
}


.home-index-search i.icon-guanbi {
    position: absolute;
    top:0.12rem;
    right:0.22rem;
    color:#B2B2B2;
}

.home-index-search input {
    border:none;
    width:7rem;
    height: 0.6rem;
    font-size:0.28rem;
    padding:0 0.68rem 0 0.68rem;
    box-sizing: border-box;
    color:#666
}

</style>
